import React, { useState, useEffect, useRef } from 'react';
import * as echarts from 'echarts';

import './index.less';
export default function ChartLine(props) {
  const { v } = props;
  const chartRef = useRef(null);

  useEffect(() => {
    renderChart();
  }, []);


  const renderChart = () => {
    const option = getChartOption();
    let chartInstance = null;
    const chart = echarts.getInstanceByDom(chartRef.current);
    if (chart) {
      chartInstance = chart;
    } else {
      chartInstance = echarts.init(chartRef.current, 'dark');
    }
    chartInstance.setOption(option);
  };

  const getChartOption = (props) => {
    // 数据
    const data = [{ value: v }];

    const width8 = (screen.width * 8) / 1920;

    const option = {
      backgroundColor: 'transparent',
      color: ['#61FF79'],
      tooltip: {
        show: false,
      },
      legend: {
        show: false,
      },
      grid: {
        // left: '0%',
        // right: '0%',
        // bottom: '0%',
        left: 0,
        top: 20, // 设置条形图的边距
        right: 5,
        bottom: 20,
      },
      xAxis: {
        max: 100,
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: 'category',
        inverse: false,
        data: data,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
      },
      series: [
        {
          type: 'bar',
          legendHoverLink: false,
          silent: true,
          data: data,
          barWidth: width8,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(71, 133, 206, .3)',
          },
          itemStyle: {
            color: {
              x: 0, //右
              y: 0, //下
              x2: 1, //左
              y2: 0, //上
              colorStops: [
                {
                  offset: 0.1,
                  color: 'rgba(1, 143, 244, 1)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(123, 235, 255, 1)', // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
    return option;
  };

  return <div className="line_chart" ref={chartRef}></div>;
}
